/** @jsx jsx */
import React from 'react';
import { Link } from 'react-router-dom';
import { toJS } from 'mobx';
import { observer } from 'mobx-react';
import {
  Breadcrumb,
  Table,
  Pagination,
  Checkbox,
  Confirm,
  Icon,
  Input,
  Select,
  FormGroup,
  Col,
  FormLabel,
  FormControl,
  Button
} from '@casstime/bricks';

import Page from '../../../components/Page';
import { parseLocationSearch, createLocationSearch } from '../../../utils';
import TestPageStore from '../stores/TestPageStore';
import { RouteConfigComponentProps } from 'react-router-config';

import { css, jsx } from '@emotion/core';
import { IPageData } from '../interfaces/IPageData';

const titleStyle = css`
  box-sizing: border-box;
  width: 100%;

  & a {
    color: red;
  }
`;

interface IHomePageProps extends RouteConfigComponentProps<void> {
  testPageStore: TestPageStore;
}

@observer
class Main extends React.Component<IHomePageProps, {}> {
  constructor(props: IHomePageProps) {
    super(props);
    this.toPage = this.toPage.bind(this);
  }

  componentDidMount() {
    const { testPageStore } = this.props;
    testPageStore.getData();
  }

  toPage(page: number) {
    const { testPageStore } = this.props;
    const search = createLocationSearch({ page });
    this.props.history.push({
      pathname: '/test',
      search
    });
    testPageStore.page = page;
    testPageStore.getData();
    testPageStore.checkAll(false);
  }

  showDeleteConfirm(index: number) {
    const { testPageStore } = this.props;
    testPageStore.showDeleteConfirm = true;
    testPageStore.index = index;
  }

  onClose() {
    const { testPageStore } = this.props;
    testPageStore.showDeleteConfirm = false;
  }

  onOk() {
    const { testPageStore } = this.props;
    testPageStore.removeListItem();
    testPageStore.showDeleteConfirm = false;
  }

  render() {
    const { testPageStore } = this.props;
    const query = parseLocationSearch(this.props.location.search);
    const page = parseInt(query.page as string, 10) || 1;
    const columns = [
      {
        title: (
          <Checkbox
            checked={testPageStore.allChecked}
            title="全选"
            onChange={e => testPageStore.checkAll(e.target.checked)}
          />
        ),
        dataIndex: 'index',
        key: 'index',
        align: 'center',
        width: 80,
        render: (value: number, row: IPageData, index: number) => {
          return (
            <div>
              <Checkbox
                checked={row.checked}
                onChange={e => testPageStore.check(e.target.checked, row.key)}
              />
            </div>
          );
        }
      },
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        align: 'center',
        width: 140,
        render: (value: number, row: IPageData, index: number) => {
          if (row.changeNameIndex) {
            return (
              <div>
                <Input
                  defaultValue={testPageStore.getChangeNameText(row.key)}
                  onChange={e =>
                    testPageStore.changeName(row.key, e.target.value)
                  }
                />
              </div>
            );
          }
          return row.name;
        }
      },
      {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
        align: 'center'
      },
      {
        title: 'Address',
        dataIndex: 'address',
        key: 'address',
        align: 'center'
      },
      {
        title: 'Operations',
        dataIndex: '',
        key: 'operations',
        align: 'center',
        render: (text: string, row: IPageData, index: number) => {
          return (
            <div>
              <a
                style={{ cursor: 'pointer' }}
                onClick={() => this.showDeleteConfirm(index)}
                // href=""
              >
                删除
              </a>
              <span style={{ margin: '0 4px' }}>|</span>
              <a
                style={{ cursor: 'pointer' }}
                onClick={() =>
                  testPageStore.changeInput(!row.changeNameIndex, row.key)
                }
              >
                {row.changeNameIndex ? '保存' : '改名'}
              </a>
            </div>
          );
        }
      }
    ];

    const data = toJS(testPageStore.list);

    return (
      <Page title="test">
        <Breadcrumb css={titleStyle} description="您当前的位置：">
          <Breadcrumb.Item>
            <Link to="/">主页</Link>
          </Breadcrumb.Item>
          <Breadcrumb.Item active>test</Breadcrumb.Item>
        </Breadcrumb>
        <FormGroup>
          <Col sm={1} className="align-right">
            <FormLabel align="right">name：</FormLabel>
          </Col>
          <Col sm={2}>
            <FormControl>
              <Select
                options={testPageStore.selectList}
                value={testPageStore.selectValue}
                onChange={data => testPageStore.selectOnChange(data)}
              />
            </FormControl>
          </Col>
          <Col sm={1} className="align-right">
            <FormLabel align="right">age：</FormLabel>
          </Col>
          <Col sm={2}>
            <FormControl>
              <Select
                options={testPageStore.selectAgeList}
                value={testPageStore.selectAge}
                onChange={data => testPageStore.selectAgeOnChange(data)}
              />
            </FormControl>
          </Col>
          <Col sm={1} className="align-right">
            <FormLabel align="right">address：</FormLabel>
          </Col>
          <Col sm={2}>
            <FormControl>
              <Input
                value={testPageStore.addressText}
                onChange={e => testPageStore.addressOnChange(e.target.value)}
              />
            </FormControl>
          </Col>
          <Col sm={3}>
            <div className="button-container">
              <Button onClick={() => testPageStore.getData()}>查询</Button>
              <Button outline onClick={() => testPageStore.reset()}>
                重置
              </Button>
            </div>
          </Col>
        </FormGroup>
        <div style={{ marginTop: 40 }}>
          <Table columns={columns} data={data} />
          <Pagination
            current={page}
            onChange={this.toPage}
            total={100}
            pageSize={10}
            showQuickJumper
          />
          {testPageStore.showDeleteConfirm && (
            <Confirm
              showShade={false}
              topTitle={'删除'}
              onClose={() => this.onClose()}
              onOk={() => this.onOk()}
              onCancel={() => this.onClose()}
              tipIcon={
                <Icon type="question-circle" color="#ffc602" size={44}></Icon>
              }
            >
              <Confirm.Header> 您确定要删除该用户吗? </Confirm.Header>
              <Confirm.Content> 删除后无法回退! </Confirm.Content>
            </Confirm>
          )}
        </div>
      </Page>
    );
  }
}

export default Main;
